<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item title="价格" v-model="priceVal" :options="priceArr" @change="priceChange"/>
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        @change="categoryChange"
      />
    </van-dropdown-menu>
    <!-- 搜索提示 当goodslist为空数组的时候长度为零-->
    <van-empty v-if="goodsList.length==0" image="search" description="您搜索的产品不存在" />
    <product v-else :goodsList="goodsList" />
  </div>
</template>

<script>
import product from "./product";
export default {
  data() {
    return {
      priceVal: 0,
      // 分类下拉菜单的当前项
      categoryVal: '',
      // 价格下拉菜单的当前项
      priceArr: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" }
      ]
    };
  },
  components: {
    product
  },
  props: ["filterCategory", "goodsList"],
  mounted() {
    // 分类下拉菜单遍历数组    根据数组中的某一项是否为true，来决定categoryVal的值
    this.filterCategory.map((val, index) => {
      if (val.checked == true) {
        this.categoryVal = val.value;
      }
    });
  },
  methods: {
    // 分类菜单的点击事件
    categoryChange(value) {
      // 子传父把刚点击的分类传给父亲
      this.$emit("categoryChange", value);
    },
    // 下拉菜单的点击事件
    priceChange(value){
      this.$emit('priceChange',value)
    }
  }
};
</script>
<style scoped></style>
